<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*复选样式*/
		.checkbox{overflow: hidden;padding:10px 0;}
		.checkbox>div{float:left;}
		.checkbox label{padding:5px 15px;background:#fff;border-radius:10px;color:#7f807f;border:1px solid #b4b4b4 ;margin-right:20px;}
		.checkbox .label_click{background:#f29c9f;color:#fff;border-color:#f29c9f;}
		.checkbox input{display:none;}
	</style>
</head>
<body>
	<div class="checkbox">自定义checkbox样式：
		<p>复选：</p>
		<div>
			<label for="ck1">复选一</label>
			<input id="ck1" type="checkbox" value="" name="2">
		</div>
		<div>
			<label for="ck2">复选二</label>
			<input id="ck2" type="checkbox" value="" name="2">
		</div>
		<div>
			<label for="ck3">复选三</label>
			<input id="ck3" type="checkbox" value="" name="2">
		</div>
	</div>
</body>
<script src="http://www.bhu.ac.cn/js/jquery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (argument) {
		$('.checkbox label').click(function(){
			if ($(this).siblings('input').is(':checked')) {
				$(this).removeClass('label_click');
			} else {
				$(this).addClass('label_click');
			}
		})
	})
</script>
</html>